<template>
  <!-- 题库信息卡片 -->
  <div class="bank-card"
       :class="{
         'has-gap': knowledgeCoverage <= 75 && knowledgeGap,
         'has-enough': knowledgeCoverage > 75
       }">
    <!-- 分析中状态 -->
    <div class="analyzing-container" v-if="isAnalyzing">
      <div class="ai-loading-animation">
        <div class="ai-brain">
          <div class="brain-lobe left"></div>
          <div class="brain-lobe right"></div>
          <div class="brain-center"></div>
        </div>
        <div class="neural-connections">
          <div class="connection" v-for="i in 8" :key="i" :style="{
            '--delay': `${i * 0.1}s`,
            '--duration': `${0.5 + Math.random() * 0.5}s`
          }"></div>
        </div>
        <div class="loading-text">
          <span class="text">AI分析中</span>
          <span class="dots">
            <span class="dot" v-for="i in 3" :key="i" :style="{
              '--delay': `${i * 0.2}s`
            }"></span>
          </span>
        </div>
      </div>
    </div>

    <!-- 卡片头部区域 -->
    <div class="card-header" v-if="!isAnalyzing">
      <h3>{{ bank.bankName }}</h3>
      <div class="ai-analysis-badge"
           :class="{
             'badge-enough': knowledgeCoverage > 75,
             'badge-gap': knowledgeCoverage <= 75 && knowledgeGap
           }">
        <template v-if="knowledgeCoverage > 75">
          <i class="fas fa-check-circle"></i>
          <span>知识充足</span>
        </template>
        <template v-else-if="knowledgeGap">
          <i class="fas fa-exclamation-triangle"></i>
          <span>知识缺口</span>
        </template>
      </div>
      <p class="bank-desc">{{ bank.description || '暂无描述' }}</p>
    </div>

    <!-- 智能分析图表区域 -->
    <div class="ai-analysis-chart" v-if="!isAnalyzing">
      <div class="chart-bar difficulty" :style="{ width: `${bank.avgDiffculty * 10}%` }">
        <span>难度 {{ bank.avgDiffculty }}/10</span>
      </div>
      <div class="chart-bar coverage" :style="{ width: `${knowledgeCoverage}%` }">
        <span>覆盖 {{ knowledgeCoverage }}%</span>
      </div>
    </div>

    <!-- 统计信息区域 -->
    <div class="bank-stats" v-if="!isAnalyzing">
      <div class="stat-item" v-for="stat in smartStats" :key="stat.label">
        <div class="stat-icon" :style="{ backgroundColor: stat.color }">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-content">
          <span class="stat-value">{{ stat.value }}</span>
          <span class="stat-label">{{ stat.label }}</span>
          <div class="stat-trend" v-if="stat.trend">
            <i :class="stat.trend.icon"></i>
            <span>{{ stat.trend.value }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 元信息区域 -->
    <div class="bank-meta" v-if="!isAnalyzing">
      <div class="meta-info">
        <div class="meta-item">
          <i class="fas fa-user-graduate"></i>
          <span>{{ getUserInfo.realName || '默认用户' }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-history"></i>
          <span>{{ formatDate(bank.createdAt) }}</span>
        </div>
      </div>
      <div class="meta-actions">
        <button class="btn-analyze" @click="analyzeBank">
          <i class="fas fa-chart-line"></i>
          分析
        </button>
        <div class="ai-recommend-tag" @click="showAiRecommendations">
          <i class="fas fa-lightbulb"></i>
          <span>建议</span>
        </div>
      </div>
    </div>

    <!-- 悬浮AI分析面板 -->
    <div class="ai-analysis-panel" v-if="showAnalysisPanel && !isAnalyzing">
      <div class="panel-header">
        <h4>AI题库分析</h4>
        <button @click="closeAnalysisPanel">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <!-- 轮播内容 -->
      <div class="carousel-outer">
        <div class="carousel-slider">
          <div
            class="carousel-track"
            :style="{
              transform: `translateX(-${currentSlide * 33.3333}%)`,
              transition: slideTransition
            }"
          >
            <!-- 第一页：知识点覆盖+题目创新度 -->
            <div
              class="carousel-slide"
              :class="{ active: currentSlide === 0, prev: currentSlide === 2, next: currentSlide === 1 }"
            >
              <div class="slide-vertical">
                <div class="slide-block">
                  <div class="analysis-header">
                    <i class="fas fa-book" style="color: #4361EE"></i>
                    <span class="analysis-title">知识点覆盖</span>
                  </div>
                  <div class="progress-container">
                    <div class="progress-bar" :style="{width: knowledgeCoverage + '%', background: 'linear-gradient(90deg, #4361EE, #F472B6)'}"></div>
                  </div>
                  <div class="progress-value">{{ knowledgeCoverage }}%</div>
                  <p class="analysis-desc">覆盖了{{ knowledgeCoverage }}%相关知识点，建议补充剩余{{ 100-knowledgeCoverage }}%</p>
                </div>
                <div class="slide-block">
                  <div class="analysis-header">
                    <i class="fas fa-lightbulb" style="color: #F59E0B"></i>
                    <span class="analysis-title">题目创新度</span>
                  </div>
                  <div class="progress-container">
                    <div class="progress-bar" :style="{width: aiAnalysis[1].value + '%', background: 'linear-gradient(90deg, #F59E0B, #FDE68A)'}"></div>
                  </div>
                  <div class="progress-value">{{ aiAnalysis[1].value }}/100</div>
                  <p class="analysis-desc">{{ aiAnalysis[1].description }}</p>
                </div>
              </div>
            </div>
            <!-- 第二页：难度分析+综合评分 -->
            <div
              class="carousel-slide"
              :class="{ active: currentSlide === 1, prev: currentSlide === 0, next: currentSlide === 2 }"
            >
              <div class="slide-vertical">
                <div class="slide-block">
                  <div class="analysis-header">
                    <i class="fas fa-signal" style="color: #F59E0B"></i>
                    <span class="analysis-title">难度分析</span>
                  </div>
                  <div class="progress-container">
                    <div class="progress-bar" :style="{width: aiAnalysis[2].value + '%', background: 'linear-gradient(90deg, #F59E0B, #EF4444)'}"></div>
                  </div>
                  <div class="progress-value">{{ aiAnalysis[2].value }}/100</div>
                  <p class="analysis-desc">{{ aiAnalysis[2].description }}</p>
                </div>
                <div class="slide-block">
                  <div class="analysis-header">
                    <i class="fas fa-star" style="color: #EC4899"></i>
                    <span class="analysis-title">综合评分</span>
                  </div>
                  <div class="progress-container">
                    <div class="progress-bar" :style="{width: aiAnalysis[3].value + '%', background: 'linear-gradient(90deg, #EC4899, #F472B6)'}"></div>
                  </div>
                  <div class="progress-value">{{ aiAnalysis[3].value }}/100</div>
                  <p class="analysis-desc">{{ aiAnalysis[3].description }}</p>
                </div>
              </div>
            </div>
            <!-- 第三页：AI建议 -->
            <div
              class="carousel-slide"
              :class="{ active: currentSlide === 2, prev: currentSlide === 1, next: currentSlide === 0 }"
            >
              <div class="slide-vertical">
                <div class="slide-block suggestion-block">
                  <div class="analysis-header">
                    <i class="fas fa-lightbulb" style="color: #F59E0B"></i>
                    <span class="analysis-title">AI建议</span>
                  </div>
                  <ul class="suggestion-list">
                    <li v-for="(suggestion, index) in aiSuggestions" :key="index">
                      <i class="fas fa-check-circle"></i> {{ suggestion }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 轮播导航点 -->
        <div class="carousel-dots">
          <span
            v-for="index in 3"
            :key="index"
            :class="{active: currentSlide === index-1}"
            @click="goToSlide(index-1)"
          ></span>
        </div>
      </div>
      <div class="panel-footer center-footer" v-if="!isAnalyzing">
        <button @click="applyAiSuggestions">
          <i class="fas fa-magic"></i>
          应用AI建议
        </button>
        <button @click="applyAiSuggestionsAndGenerate" class="btn-generate">
          <i class="fas fa-bolt"></i>
          直接生成
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import callSiliconAI from '@/api/generate/index';

export default {
  name: 'GenerateBankCard',
  props: {
    bank: {
      type: Object,
      required: true
    },
    questions: {
      type: Array,
      default: () => []
    },
    isAnalyzing: {
      type: Boolean,
      default: false
    },
    aiAnalysisResult: {
      type: Object,
      default: () => ({})
    },
    suggestedKeywords: {
      type: Array,
      default: () => []
    },
    recommendationOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showAnalysisPanel: false,
      currentSlide: 0,
      slideTransition: 'transform 0.5s cubic-bezier(0.4,0,0.2,1)'
    }
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"]),
    knowledgeCoverage() {
      return this.aiAnalysisResult.knowledgeCoverage ?? 0;
    },
    knowledgeGap() {
      return (this.aiAnalysisResult.missingKnowledgePoints?.length ?? 0) > 0;
    },
    aiSuggestions() {
      return this.aiAnalysisResult.aiSuggestions ?? [];
    },
    aiAnalysis() {
      return [
        {
          title: '知识点覆盖',
          value: this.knowledgeCoverage,
          description: `题库覆盖了${this.knowledgeCoverage}%的相关知识点，建议补充剩余${100 - this.knowledgeCoverage}%`,
          icon: 'fas fa-book',
          color: '#4361EE'
        },
        {
          title: '题目创新度',
          value: this.aiAnalysisResult.innovationScore ?? 0,
          description: this.aiAnalysisResult.innovationEvaluation ?? '',
          icon: 'fas fa-lightbulb',
          color: '#F59E0B'
        },
        {
          title: '难度分析',
          value: this.aiAnalysisResult.difficultyScore ?? 0,
          description: this.aiAnalysisResult.difficultyEvaluation ?? '',
          icon: 'fas fa-signal',
          color: '#EF4444'
        },
        {
          title: '综合评分',
          value: this.aiAnalysisResult.overallQualityScore ?? 0,
          description: this.aiAnalysisResult.overallQualityEvaluation ?? '',
          icon: 'fas fa-star',
          color: '#EC4899'
        }
      ];
    },
    smartStats() {
      // 题目数量、平均难度、使用频率
      const total = this.bank.totalQuestionNum || 0;
      const avgDiff = this.questions.length > 0 ?
        parseFloat((this.questions.reduce((acc, q) => acc + (q.difficulty || 0), 0) / this.questions.length).toFixed(1)) :
        (this.bank.avgDiffculty ?? 0);
      return [
        {
          label: '题目数量',
          value: total,
          icon: 'fas fa-list-ol',
          color: '#4361EE',
          trend: this.generatePseudoTrend(total)
        },
        {
          label: '平均难度',
          value: avgDiff,
          icon: 'fas fa-signal',
          color: '#F59E0B',
          trend: this.calculateDifficultyTrend(avgDiff, total)
        },
        {
          label: '使用频率',
          value: this.getFrequencyLevel(total),
          icon: 'fas fa-chart-line',
          color: '#8B5CF6'
        }
      ];
    }
  },
  methods: {
    generatePseudoTrend(count) {
      if (count > 100) return { value: `+${Math.min(15, Math.floor(count / 10))} %`, icon: 'fas fa-arrow-up', color: '#10B981'}
      if (count < 50) return {value: `-${Math.min(20,Math.floor((50 - count) / 2))} %`, icon: 'fas fa-arrow-down', color: '#EF4444'}
      return null
    },
    getFrequencyLevel(count) {
      if (count > 200) return '非常高'
      if (count > 100) return '高'
      if (count > 50) return '中'
      return '低'
    },
    calculateDifficultyTrend(avgDifficulty, questionCount) {
      if (questionCount) {
        const trend = this.calculateRealisticTrend(avgDifficulty, questionCount);
        if (trend) return trend;
      }
      return this.getDifficultyTreand(avgDifficulty);
    },
    calculateRealisticTrend (currentAvg, currentCount) {
      const lastTotal = localStorage.getItem('lastDifficultyTotal');
      const lastCount = localStorage.getItem('lastQuestionCount');
      localStorage.setItem('lastDifficultyTotal', currentAvg * currentCount);
      localStorage.setItem('lastQuestionCount', currentCount);
      if (!lastTotal || !lastCount)  {
        return null;
      }
      const lastAvg = lastTotal / lastCount;
      const change = ((currentAvg - lastAvg) / lastAvg * 100).toFixed(1);
      return {
        value: `${change >= 0 ? '+' : ''}${change}%`,
        icon: change >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down',
        color: change >= 0 ? '#EF4444' : '#10B981'
      }
    },
    getDifficultyTreand(avgDifficulty) {
      const difficulty = parseFloat(avgDifficulty) || 0
      if (difficulty > 7) {
        return {
          value: `+${Math.floor((difficulty - 7) * 2)}%`,
          icon: 'fas fa-arrow-up',
          color: '#EF4444'
        };
      } else if (difficulty < 5) {
        return {
          value: `-${Math.floor((5 - difficulty) * 2)}%`,
          icon: 'fas fa-arrow-down',
          color: '#10B981'
        };
      }
      return null;
    },
    showAiRecommendations() {
      this.showAnalysisPanel = true;
      if (!this.isAnalyzing) {
        this.startAutoCarousel();
      }
    },
    closeAnalysisPanel() {
      this.showAnalysisPanel = false;
      this.stopAutoCarousel();
    },
    applyAiSuggestions() {
      // 自动应用第一个推荐配置
      const option = this.recommendationOptions && this.recommendationOptions[0];
      if (option) {
        this.$emit('apply-recommendation', option);
        this.$notify({
          title: '配置已应用',
          message: `已应用推荐配置: ${option.label}`,
          type: 'success'
        });
      } else {
        this.$notify({
          title: '无可用AI建议',
          message: 'AI未给出推荐配置',
          type: 'warning'
        });
      }
      this.closeAnalysisPanel();
    },
    applyAiSuggestionsAndGenerate() {
      // 完全独立的配置，不依赖任何推荐方案
      if (this.suggestedKeywords && this.suggestedKeywords.length > 0) {
        // 创建完全独立的配置
        const customTypes = {
          single: 2 + Math.floor(Math.random() * 4),    // 2-5道单选题
          multiple: 1 + Math.floor(Math.random() * 4),  // 1-5道多选题
          truefalse: 1 + Math.floor(Math.random() * 4), // 1-5道判断题
          fillblank: 2 + Math.floor(Math.random() * 3), // 2-4道填空题
          short_answer: 2 + Math.floor(Math.random() * 4)  // 2-5道简答题
        };
        
        // 随机选择2-4个关键词，而不是总是取前3个
        const shuffledKeywords = [...this.suggestedKeywords].sort(() => 0.5 - Math.random());
        const keywordCount = 2 + Math.floor(Math.random() * 3); // 随机选择2-4个关键词
        const keywords = shuffledKeywords.slice(0, keywordCount).join(', ');
        
        // 创建独立配置
        const config = {
          // 使用AI建议的关键词
          keywords: keywords,
          // 使用中等难度
          difficulty: 'medium',
          // 使用考试风格
          style: 'exam',
          // 使用独立配置的题型分布
          questionTypes: customTypes,
          // 添加分析结果，用于后续API调用
          analysisResult: this.aiAnalysisResult
        };
        
        // 发送事件并将配置传递给父组件
        this.$emit('start-generate', config);
        
        this.$notify({
          title: '开始智能生成',
          message: `正在使用AI分析结果直接生成题目`,
          type: 'success'
        });
      } else {
        this.$notify({
          title: '无法生成',
          message: '没有可用的关键词建议，请先进行题库分析',
          type: 'warning'
        });
      }
    },
    analyzeBank() {
      // 通过事件通知父组件显示分析状态，而不是直接修改prop
      this.$emit('update:isAnalyzing', true);
      // 保留原有事件触发
      this.$emit('analyze-bank');
      
      // 生成分析提示
      this.$notify({
        title: '开始分析',
        message: 'AI正在分析题库内容，请稍候...',
        type: 'info'
      });
      
      const bankData = { bank: this.bank, questions: this.questions };
      const systemPrompt = "你是一位专业的教育内容分析专家，擅长分析题库质量和内容。请使用纯JSON格式返回分析结果，不要使用Markdown格式。";
      
      const prompt = `
          请严格按以下示例JSON格式返回分析结果，不要任何解释性文字：
          
          解释：
          知识点覆盖[百分比]%。缺失：[1.知识点1 2.知识点2 3.知识点3]
          难度分析：[分数]/100。评价：[难度评价]
          题型多样性：[低/中/高]。缺失题型：[题型1, 题型2]
          创新度评分：[分数]/100。评价：[创新度评价]
          综合质量：[分数]/100。评价：[综合质量评价]
          AI建议：根据以上分析结果，给出4 - 5条可操作的具体改进建议[如果分析结果中没有给出建议或者整体质量优秀，则返回"AI建议：整体质量优秀，建议继续保持"]
          对结果进行分析给出用户生成题目的关键字：[关键词1, 关键词2, 关键词3，关键词4，关键词5，关键词6，关键词7，关键词8,...]共16个关键字（每个关键词不得少于或者超过4-6个字）
          
          题库有题目示例：
          {
              "knowledgeCoverage": 知识点覆盖百分比,
              "missingKnowledgePoints": ["缺失知识点1", "缺失知识点2", "缺失知识点3"],
              "difficultyScore": 难度分析分数,
              "difficultyEvaluation": "难度评价",
              "questionTypeDiversity": "低/中/高",
              "missingQuestionTypes": ["缺失题型1", "缺失题型2"],
              "innovationScore": 创新度评分,
              "innovationEvaluation": "创新度评价",
              "overallQualityScore": 综合质量分数,
              "overallQualityEvaluation": "综合质量评价",
              "aiSuggestions": ["AI建议1", "AI建议2", "AI建议3", "AI建议4", "AI建议5"],
              "suggestedKeywords": ["关键词1", "关键词2", "关键词3", "关键词4", "关键词5", "关键词6", "关键词7", "关键词8","关键词9", "关键词10", "关键词11", "关键词12", "关键词13", "关键词14", "关键词15", "关键词16"]
          }
          
          题库没有题目示例：
          {
              "knowledgeCoverage": 0,
              "missingKnowledgePoints": [],
              "difficultyScore": 0,
              "difficultyEvaluation": "题库中没有题目，无法分析, 请先添加题目",
              "questionTypeDiversity": "低/中/高",
              "missingQuestionTypes": ["缺失题型1", "缺失题型2", "缺失题型3"],
              "innovationScore": 0,
              "innovationEvaluation": "题库中没有题目，无法分析,请先添加题目",
              "overallQualityScore": 0,
              "overallQualityEvaluation": "题库中没有题目，无法分析,请先添加题目",
              "aiSuggestions": ["题库中没有题目，无法分析,请先添加题目"],
              "suggestedKeywords": []
          }
          
          要求：
          1. 知识点覆盖率精确到整数，（缺失的知识点是根据题库中所有题目分析得出的以及题库的名称和描述分析得出）缺失知识点不超过3个主要点
          2. 难度分级标准：1-3简单，4-7中等，8-10困难
          3. 题型判断标准：缺少2种以上为低，缺1种为中，全有为高
          4. 创新度评分基于题目独特性、现实应用性、解法多样性
          5. 综合质量评分需考虑知识点覆盖、难度分布、题型多样性、创新度
          6. 所有百分比数值取整数
          7：题型只有：单选、多选、判断、填空、简答
          8：关于缺失知识点，要有边界，不要超出题库范围
          9：给出的评价要客观，不要夸大，不低于6到7个字，不要超过15个字[综合评价示例：题库整体质量优秀，建议继续保持, 创新度评价示例：题目设计新颖，具有独特性，难度评价示例：难度适中，但存在部分难题]
          10：AI建议要具体，不要抽象，不要超过10个字[AI建议示例：增加高难度题 2.补充概率统计题 3.优化多选题设计]
          11: 当题库中没有题目时，返回：题库中没有题目，无法分析，请先添加题目
          13. 只返回上述格式内容，不要任何额外解释
          14. 不要出现任何解释性文字，以及任何其他文字，不得少于4-6个字符
        `;
      
      // 添加forceRefresh标志强制跳过缓存
      const forceRefresh = true;
      
      // 直接调用API并处理结果
      callSiliconAI(prompt, bankData, systemPrompt)
        .then(response => {
          let result;
          try {
            // 清理可能的Markdown代码块
            let cleanResponse = response;
            if (typeof response === 'string') {
              cleanResponse = response
                .replace(/```json\s*/g, '')  // 移除开始的```json
                .replace(/```\s*$/g, '')     // 移除结束的```
                .replace(/```/g, '')         // 移除任何剩余的```标记
                .trim();
            }
            
            result = typeof cleanResponse === 'string' ? JSON.parse(cleanResponse) : cleanResponse;
            
            // 通知父组件分析完成
            this.$emit('analysis-completed', result);
            
            this.$notify({
              title: '分析完成',
              message: '题库分析已完成',
              type: 'success'
            });
          } catch (error) {
            console.error('解析分析结果失败:', error);
            console.log('AI原始响应:', response);
            this.$notify.error('解析分析结果失败，请重试');
          }
        })
        .catch(error => {
          console.error('题库分析失败:', error);
          this.$notify.error('题库分析失败：' + error.message);
        })
        .finally(() => {
          // 通过事件通知父组件更新状态，而不是直接修改prop
          this.$emit('update:isAnalyzing', false);
        });
    },
    formatDate(dateString) {
      if (!dateString) return '未知';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).replace(/\//g, '-');
    },
    startAutoCarousel() {
      this.stopAutoCarousel();
      this.carouselInterval = setInterval(() => {
        this.nextSlide();
      }, 5000);
    },
    stopAutoCarousel() {
      if (this.carouselInterval) {
        clearInterval(this.carouselInterval);
        this.carouselInterval = null;
      }
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % 3;
    },
    goToSlide(idx) {
      this.currentSlide = idx;
      this.startAutoCarousel();
    }
  },
  mounted() {
    if (!this.isAnalyzing) {
      this.startAutoCarousel();
    }
  },
  beforeDestroy() {
    this.stopAutoCarousel();
  }
}
</script>

<style lang="less" scoped>
@primary: #4361EE;
@primary-light: #5E72E4;
@primary-lighter: #8A9EFF;
@primary-dark: #3A0CA3;
@secondary: #7209B7;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@info: #3B82F6;
@purple: #8B5CF6;
@gray-50: #F9FAFB;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

@radius-sm: 6px;
@radius-md: 8px;
@radius-lg: 12px;
@radius-xl: 16px;
@radius-2xl: 20px;
@radius-3xl: 24px;
@radius-full: 9999px;

@transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

.bank-card {
  background: white;
  border-radius: @radius-xl;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
  transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
  border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
  transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: box-shadow, border-color, transform;
  position: relative;
  border: 1px solid @gray-200;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 525px;

  &:hover {
    transform: translateY(-2.5px) scale(1.012);
    box-shadow: 0 6px 18px rgba(16,185,129,0.13), 0 1.5px 5px rgba(67,97,238,0.08);
    border-color: #6EE7B7;
    &::after { opacity: 1; }
  }

  .card-header {
    position: relative;
    h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.25rem;
      font-weight: 600;
      color: @gray-900;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      padding-right: 30px;
    }
    .ai-analysis-badge {
      position: absolute;
      top: 0;
      right: -15px;
      padding: 0.25rem 0.75rem;
      border-radius: @radius-full;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      i { font-size: 0.8rem; }
    }
    .bank-desc {
      margin: 0;
      font-size: 0.875rem;
      color: @gray-600;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.6;
    }
  }

  .ai-analysis-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    .chart-bar {
      height: 28px;
      border-radius: @radius-full;
      position: relative;
      overflow: hidden;
      transition: width 1s ease;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      span {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }
      &.difficulty {
        background: linear-gradient(90deg, #F59E0B, #EF4444);
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg,
          rgba(255,255,255,0.1) 25%,
          rgba(255,255,255,0.3) 50%,
          rgba(255,255,255,0.1) 75%);
          background-size: 200% 100%;
          animation: shimmer 2s infinite linear;
        }
      }
      &.coverage {
        background: linear-gradient(90deg, #10B981, #3B82F6);
      }
    }
  }

  .bank-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    .stat-item {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      padding: 0.75rem;
      border-radius: @radius-lg;
      background: @gray-50;
      transition: all 0.3s ease;
      &:hover {
        background: fade(@primary, 8%);
        transform: translateY(-3px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        .stat-icon { transform: scale(1.1); }
      }
      .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: @radius-full;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
        transition: all 0.3s ease;
      }
      .stat-content {
        flex: 1;
        .stat-value {
          display: block;
          font-size: 1.1rem;
          font-weight: 700;
          color: @gray-800;
          line-height: 1.2;
        }
        .stat-label {
          display: block;
          font-size: 0.75rem;
          color: @gray-600;
        }
        .stat-trend {
          margin-top: 0.25rem;
          font-size: 0.7rem;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          i { font-size: 0.6rem; }
          &[data-color="up"] { color: @success; }
          &[data-color="down"] { color: @danger; }
        }
      }
    }
  }

  .bank-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: @gray-600;
    margin-top: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid @gray-200;
    position: relative;
    min-height: 40px;
    height: auto;
    
    .meta-info {
      display: flex;
      gap: 0.8rem;
      flex: 1;
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      max-width: calc(100% - 130px);
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        
        i { 
          font-size: 0.75rem; 
          color: @gray-500;
          flex-shrink: 0;
        }
        
        span {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    
    .meta-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      flex-shrink: 0;
      white-space: nowrap;
      
      .btn-analyze {
        background: rgba(@info, 0.1);
        color: @info;
        padding: 0.2rem 0.5rem;
        border-radius: @radius-full;
        font-size: 0.7rem;
        border: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        font-weight: 500;
        
        &:hover {
          background: rgba(@info, 0.2);
          transform: translateY(-1px);
        }
        
        i { 
          font-size: 0.7rem;
          color: @info; 
        }
      }
      
      .ai-recommend-tag {
        background: rgba(@primary, 0.1);
        color: @primary;
        padding: 0.2rem 0.5rem;
        border-radius: @radius-full;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        font-weight: 500;
        
        &:hover {
          background: rgba(@primary, 0.2);
          transform: translateY(-1px);
        }
        
        i { 
          font-size: 0.7rem; 
          color: @primary; 
        }
      }
    }
    
    @media (max-width: 380px) {
      flex-wrap: wrap;
      gap: 0.5rem;
      
      .meta-info {
        max-width: 100%;
        margin-bottom: 0.3rem;
        white-space: normal;
        flex-wrap: wrap;
      }
      
      .meta-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
      }
    }
  }

  .ai-analysis-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-radius: @radius-xl;
    padding: 1.5rem;
    z-index: 10;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden; /* Add this to prevent scrollbars */

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      h4 {
        margin: 0;
        font-size: 1.1rem;
        color: @gray-800;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      button {
        background: none;
        border: none;
        color: @gray-500;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        &:hover {
          color: @danger;
          transform: rotate(90deg);
        }
      }
    }

    /* 分析中动画容器 */
    .analyzing-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      position: relative;
      overflow: hidden; /* Add this to prevent scrollbars */
      
      .ai-loading-animation {
        width: 200px;
        height: 200px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* Add this to prevent scrollbars */
        
        /* 大脑形状 */
        .ai-brain {
          width: 120px;
          height: 100px;
          position: relative;
          margin-bottom: 1.5rem;
          
          .brain-lobe {
            position: absolute;
            width: 50px;
            height: 80px;
            background: linear-gradient(135deg, @primary, @secondary);
            border-radius: 50px 50px 20px 20px;
            animation: pulse 2s infinite ease-in-out;
            
            &.left {
              left: 0;
              transform-origin: right center;
              animation-delay: 0.2s;
            }
            
            &.right {
              right: 0;
              transform-origin: left center;
              animation-delay: 0.4s;
            }
          }
          
          .brain-center {
            position: absolute;
            width: 20px;
            height: 40px;
            background: linear-gradient(135deg, @primary, @secondary);
            left: 50%;
            top: 30px;
            transform: translateX(-50%);
            border-radius: 10px;
            z-index: 2;
          }
        }
        
        /* 神经连接动画 */
        .neural-connections {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          
          .connection {
            position: absolute;
            background: linear-gradient(90deg, fade(@primary, 30%), @primary, fade(@primary, 30%));
            height: 2px;
            width: 0;
            opacity: 0;
            animation: neuralPulse var(--duration) infinite ease-in-out;
            animation-delay: var(--delay);
            
            &:nth-child(1) {
              top: 30%;
              left: 20%;
              width: 60%;
            }
            &:nth-child(2) {
              top: 40%;
              left: 15%;
              width: 70%;
            }
            &:nth-child(3) {
              top: 50%;
              left: 10%;
              width: 80%;
            }
            &:nth-child(4) {
              top: 60%;
              left: 15%;
              width: 70%;
            }
            &:nth-child(5) {
              top: 70%;
              left: 20%;
              width: 60%;
            }
            &:nth-child(6) {
              top: 30%;
              right: 20%;
              width: 60%;
            }
            &:nth-child(7) {
              top: 40%;
              right: 15%;
              width: 70%;
            }
            &:nth-child(8) {
              top: 50%;
              right: 10%;
              width: 80%;
            }
          }
        }
        
        /* 加载文字 */
        .loading-text {
          margin-top: 2rem;
          text-align: center;
          
          .text {
            font-size: 1.1rem;
            font-weight: 600;
            color: @gray-800;
            display: block;
            margin-bottom: 0.5rem;
          }
          
          .dots {
            display: flex;
            justify-content: center;
            gap: 0.3rem;
            
            .dot {
              width: 8px;
              height: 8px;
              background: @primary;
              border-radius: 50%;
              opacity: 0;
              animation: dotPulse 1.5s infinite ease-in-out;
              animation-delay: var(--delay);
              
              &:nth-child(1) { --delay: 0s; }
              &:nth-child(2) { --delay: 0.2s; }
              &:nth-child(3) { --delay: 0.4s; }
            }
          }
        }
      }
    }

    .carousel-outer {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
      min-height: 0;
      height: 0;
      position: relative;
      overflow: hidden;

      .carousel-slider {
        flex: 1;
        min-height: 0;
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 100%;
        overflow: hidden; /* Add this to prevent scrollbars */
      }
      .carousel-track {
        display: flex;
        flex-direction: row;
        width: 300%;
        height: 100%;
        min-height: 0;
        transition: @transition;
      }
      .carousel-slide {
        width: 33.3333%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        background: white;
        border-radius: @radius-md;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        padding: 1.1rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        opacity: 0.5;
        transform: scale(0.92);
        transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        pointer-events: none;
        &.active {
          opacity: 1;
          transform: scale(1.05);
          z-index: 2;
          pointer-events: auto;
        }
        &.prev, &.next {
          opacity: 0.7;
          transform: scale(0.97);
          z-index: 1;
        }
      }
      .slide-vertical {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        width: 250px;
        align-items: stretch;
        justify-content: center;
        min-height: 0;
        flex: 1;
        @media (max-width: 600px) {
          gap: 0.7rem;
        }
        .slide-block {
          flex: 1 1 0;
          min-width: 120px;
          max-width: 320px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .analysis-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            i { font-size: 1.15rem; }
            .analysis-title {
              font-weight: 600;
              color: @gray-800;
            }
          }
          .progress-container {
            width: 100%;
            height: 10px;
            background: @gray-100;
            border-radius: 5px;
            margin-bottom: 0.5rem;
            overflow: hidden;
            .progress-bar {
              height: 100%;
              border-radius: 5px;
              transition: width 1s cubic-bezier(0.4,0,0.2,1);
            }
          }
          .progress-value {
            font-size: 0.92rem;
            font-weight: 600;
            color: @primary;
            margin-bottom: 0.18rem;
          }
          .analysis-desc {
            margin: 0.4rem 0 0;
            font-size: 0.82rem;
            color: @gray-600;
            line-height: 1.5;
            text-align: center;
          }
        }
        .suggestion-block {
          .analysis-header {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            margin-bottom: 0.5rem;
            i { font-size: 1.1rem; }
            .analysis-title {
              font-weight: 600;
              color: @gray-800;
            }
          }
          .suggestion-list {
            margin: 1.1rem 0 0 0;
            padding-left: 0;
            list-style: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            li {
              margin: 0.35rem 0;
              color: @gray-700;
              font-size: 0.95rem;
              display: flex;
              align-items: center;
              i {
                color: #10B981;
                margin-right: 0.45rem;
              }
            }
          }
        }
      }
    }
    .carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1.1rem;
      gap: 0.65rem;
      span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: @gray-200;
        cursor: pointer;
        transition: background 0.3s;
        &.active {
          background: @primary;
          box-shadow: 0 0 0 2px fade(@primary, 20%);
        }
      }
    }
  }

  .panel-footer {
    text-align: center;
    padding: 0.8rem 1rem;
    margin-top: auto;

    &.center-footer {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
    }

    button {
      background: rgba(@primary, 0.1);
      color: @primary;
      border: 1px solid rgba(@primary, 0.2);
      border-radius: @radius-md;
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: @transition;
      display: flex;
      align-items: center;
      gap: 0.4rem;

      i {
        transition: @transition;
        font-size: 0.8rem;
      }

      &:hover {
        background: rgba(@primary, 0.2);
        transform: translateY(-1px);

        i {
          transform: rotate(15deg);
        }
      }

      &.btn-generate {
        background: linear-gradient(135deg, @primary, @secondary);
        color: white;
        border: none;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        
        &:hover {
          background: linear-gradient(135deg, darken(@primary, 5%), darken(@secondary, 5%));
          transform: translateY(-1px);
          box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

/* 分析中动画容器 */
.analyzing-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  position: relative;
  overflow: hidden; /* Add this to prevent scrollbars */
  
  .ai-loading-animation {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Add this to prevent scrollbars */
    
    /* 大脑形状 */
    .ai-brain {
      width: 120px;
      height: 100px;
      position: relative;
      margin-bottom: 1.5rem;
      
      .brain-lobe {
        position: absolute;
        width: 50px;
        height: 80px;
        background: linear-gradient(135deg, @primary, @secondary);
        border-radius: 50px 50px 20px 20px;
        animation: pulse 2s infinite ease-in-out;
        
        &.left {
          left: 0;
          transform-origin: right center;
          animation-delay: 0.2s;
        }
        
        &.right {
          right: 0;
          transform-origin: left center;
          animation-delay: 0.4s;
        }
      }
      
      .brain-center {
        position: absolute;
        width: 20px;
        height: 40px;
        background: linear-gradient(135deg, @primary, @secondary);
        left: 50%;
        top: 30px;
        transform: translateX(-50%);
        border-radius: 10px;
        z-index: 2;
      }
    }
    
    /* 神经连接动画 */
    .neural-connections {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      
      .connection {
        position: absolute;
        background: linear-gradient(90deg, fade(@primary, 30%), @primary, fade(@primary, 30%));
        height: 2px;
        width: 0;
        opacity: 0;
        animation: neuralPulse var(--duration) infinite ease-in-out;
        animation-delay: var(--delay);
        
        &:nth-child(1) {
          top: 30%;
          left: 20%;
          width: 60%;
        }
        &:nth-child(2) {
          top: 40%;
          left: 15%;
          width: 70%;
        }
        &:nth-child(3) {
          top: 50%;
          left: 10%;
          width: 80%;
        }
        &:nth-child(4) {
          top: 60%;
          left: 15%;
          width: 70%;
        }
        &:nth-child(5) {
          top: 70%;
          left: 20%;
          width: 60%;
        }
        &:nth-child(6) {
          top: 30%;
          right: 20%;
          width: 60%;
        }
        &:nth-child(7) {
          top: 40%;
          right: 15%;
          width: 70%;
        }
        &:nth-child(8) {
          top: 50%;
          right: 10%;
          width: 80%;
        }
      }
    }
    
    /* 加载文字 */
    .loading-text {
      margin-top: 2rem;
      text-align: center;
      
      .text {
        font-size: 1.1rem;
        font-weight: 600;
        color: @gray-800;
        display: block;
        margin-bottom: 0.5rem;
      }
      
      .dots {
        display: flex;
        justify-content: center;
        gap: 0.3rem;
        
        .dot {
          width: 8px;
          height: 8px;
          background: @primary;
          border-radius: 50%;
          opacity: 0;
          animation: dotPulse 1.5s infinite ease-in-out;
          animation-delay: var(--delay);
          
          &:nth-child(1) { --delay: 0s; }
          &:nth-child(2) { --delay: 0.2s; }
          &:nth-child(3) { --delay: 0.4s; }
        }
      }
    }
  }
}

@media (max-height: 700px) {
.ai-analysis-panel {
max-height: 70vh;
.carousel-slide { padding: 0.7rem 0.3rem; }
}
}
@media (max-width: 768px) {
.bank-card { height: 520px; }
.ai-analysis-panel .carousel-slide { max-width: 96vw; }
}
@media (max-width: 480px) {
.bank-card { height: 550px; }
.ai-analysis-panel .carousel-slide { max-width: 99vw; }
.bank-card .bank-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: @gray-600;
  margin-top: auto;
  padding-top: 0.6rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid @gray-200;
  position: relative;
  min-height: 40px;
  height: auto;
  
  /* 修改响应式布局 */
  @media (max-width: 460px) {
    flex-wrap: wrap;
    gap: 0.5rem;
    
    .meta-info {
      max-width: 100%;
      margin-bottom: 0.3rem;
    }
    
    .meta-actions {
      margin-left: 0;
      width: 100%;
      justify-content: flex-start;
    }
  }
}
.bank-card .bank-meta .meta-info,
.bank-card .bank-meta .meta-actions {
  width: 100%;
  justify-content: space-between;
}
}
@media (max-width: 375px) {
.bank-card .bank-meta .meta-info {
  flex-direction: column;
  gap: 0.3rem;
}
}


@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
}

@keyframes neuralPulse {
  0% { width: 0; opacity: 0; transform: translateX(0); }
  10% { opacity: 0.3; }
  50% { width: 100%; opacity: 1; }
  90% { opacity: 0.3; }
  100% { width: 0; opacity: 0; transform: translateX(100%); }
}

@keyframes dotPulse {
0%, 100% { opacity: 0.2; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}

.bank-card.has-gap {
  border-left: 4px solid @danger;
  border: 1.5px solid fade(@danger, 20%);
  box-shadow: 0 2px 8px fade(@danger, 8%);
  background: fade(@danger, 2%);
}
.bank-card.has-enough {
  border-left: 4px solid @success;
  border: 1.5px solid #A7F3D0;
  box-shadow: 0 2px 12px fade(@success, 10%);
  background: fade(@success, 3%);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.bank-card.has-enough:hover {
  box-shadow: 0 4px 20px fade(@success, 18%);
  border-color: #6EE7B7;
}
.ai-analysis-badge {
  &.badge-gap {
    background: fade(@danger, 10%);
    color: @danger;
    i { color: @danger; }
  }
  &.badge-enough {
    background: fade(@success, 12%);
    color: @success;
    i { color: @success; }
  }
}

</style>